<template>
	<!-- 活动商品 -->
	<view class="activity-wrap u-p-x-20 u-p-b-20  u-m-b-10 seckill-card" v-if="showActivity">
		<!-- 标题栏 -->
		<view class="title-box u-flex u-row-between u-p-y-20  seckill-title">
			<view class="head-title u-ellipsis-1" v-if="title=='镇店之宝'">
				<image class="left-img" src="https://duomi.bigchun.com/images/Group2310.png"></image>
				<image class="right-img" v-if="!isshouye" src="https://duomi.bigchun.com/images/Group2188.png"></image>
			</view>
			<view class="head-title u-ellipsis-1" v-if="title=='限时秒杀'">
				<image class="left-img" src="https://duomi.bigchun.com/images/Group2306.png"></image>
				<image class="right-img" v-if="!isshouye" src="https://duomi.bigchun.com/images/Group2188.png"></image>
			</view>
			<view class="head-title u-ellipsis-1" v-if="title=='新品预售'">
				<image class="left-img left-img-yushou" src="https://duomi.bigchun.com/images/Group 2487.png"></image>
			</view>
			<view class="head-title u-ellipsis-1" v-if="title=='折上返券'">
				<image class="left-img left-img-dazhe" src="https://duomi.bigchun.com/images/Group2399.png"></image>
			</view>
			<view class="head-title u-ellipsis-1" v-if="title=='预售专区'">
				<image class="left-img" src="https://duomi.bigchun.com/images/Group2307.png"></image>
			</view>
			<view class="head-title u-ellipsis-1" v-if="title=='热销专区'">
				<image class="left-img" src="https://duomi.bigchun.com/images/Group 2488.png"></image>
			</view>
			<view v-if="title!='热销专区'" class="head-more u-flex u-col-center"
				@tap="$Router.push({path:'/pages/activity/activity/activity',query:{'title':title}})">
				<text class="more-text">查看更多</text>
				<u-icon name="arrow-right" size="20" color="#999999"></u-icon>
			</view>
			<view v-if="title=='热销专区'" class="head-more u-flex u-col-center"
				@tap="$Router.push({path:'/pages/index/huixuan_good',query:{'title':title}})">
				<text class="more-text">查看更多</text>
				<u-icon name="arrow-right" size="20" color="#999999"></u-icon>
			</view>
		</view>
		<!-- 活动商品 -->
		<scroll-view v-if="title!='热销专区'" class="scroll-box" scroll-x scroll-anchoring>
			<view class="goods-box u-flex">
				<view class="min-goods u-m-r-14" v-for="mgoods in goodsList" :key="mgoods.id"
					@tap="jump('/pages/goods/new_detail', { id: mgoods.id })">
					<view class="img-box">
						<image class="img" :src="mgoods.image" mode=""></image>
						<image v-if="title=='镇店之宝'" class="miaosha-icon"
							src="https://duomi.bigchun.com/images/Group 2480.png" mode="">
						</image>
						<image v-if="title=='热销专区'" class="rexiao-icon"
							src="https://duomi.bigchun.com/images/Frame (2).png" mode="">
						</image>
					</view>
					<view class="mgoods-card-bottom u-p-t-20">
						<view class="goods-title  u-m-b-10 u-ellipsis-2">
							<!-- <text class="goods-type">多米自营</text> -->
							<view v-if="mgoods.sale_type == 0" class="goods-type"
								style=" background: url('https://duomi.bigchun.com/images/back1.png') no-repeat!important;background-size: cover!important;">
								多米自营
							</view>
							<view v-if="mgoods.sale_type == 1" class="goods-type"
								style=" background: url('https://duomi.bigchun.com/images/back2.png') no-repeat!important;background-size: cover!important;">
								多米超市
							</view>
							<!-- 	<image v-if="mgoods.sale_type == 0" class="goods-type"
								src="https://duomi.bigchun.com/images/Group 2434.png" mode=""
								style="width: 72rpx;height: 28rpx;"></image>
							<image v-if="mgoods.sale_type == 1" class="goods-type"
								src="https://duomi.bigchun.com/images/Group 2436.png" mode=""
								style="width: 72rpx;height: 28rpx;"></image> -->
							{{ mgoods.title }}
						</view>
						<view class="price-box font-OPPOSANS">
							<view class="u-m-b-10">
								<text class="price-title">会员价：</text>
								<text class="price ">{{mgoods.vip_price}}</text>
							</view>
							<!-- <view class="price u-m-b-10" v-else>{{ mgoods.price }}</view> -->
							<!--							<view class="original-price">￥{{ mgoods.original_price }}</view>-->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 热销专区 -->
		<view v-if="title == '热销专区'" class="scroll-box scroll-box-y " scroll-anchoring style="height: auto;">
			<view class="goods-box goods-box-y u-flex">
				<view class="min-goods min-goods-y u-m-r-14" v-for="(mgoods,index) in goodsList" :key="mgoods.id"
					@tap="jump('/pages/goods/new_detail', { id: mgoods.id })">
					<view class="img-box img-box-y">
						<image class="img img-y" :src="mgoods.image" mode=""></image>
						<image v-if="title=='镇店之宝'" class="miaosha-icon"
							src="https://duomi.bigchun.com/images/Group 2480.png" mode="">
						</image>
						<image v-if="title=='热销专区'" class="rexiao-icon"
							src="https://duomi.bigchun.com/imgs/hotshop.png" mode="">
						</image>
					</view>
					<view class="mgoods-card-bottom u-p-t-20">
						<view class="goods-title goods-title-1  u-m-b-10">
<!--							aa{{ mgoods.title }}-->

              <view v-if="mgoods.sale_type == 0" class="goods-type"
                    style=" background: url('https://duomi.bigchun.com/images/back1.png') no-repeat!important;background-size: cover!important;">
                多米自营
              </view>
              <view v-if="mgoods.sale_type == 1" class="goods-type"
                    style=" background: url('https://duomi.bigchun.com/images/back2.png') no-repeat!important;background-size: cover!important;">
                多米超市
              </view>


<!--              <image src="https://duomi.bigchun.com/imgs/dmcs.png" style="vertical-align:middle;width: 43px;height: 20px;" v-if="mgoods.sale_type ==1">-->
<!--              </image>-->

<!--              <image src="https://duomi.bigchun.com/imgs/dmzy.png" style="vertical-align:middle;width: 43px;height: 20px;" v-else>-->
<!--              </image>-->


              <text style="vertical-align: middle;">{{ mgoods.title }}</text>

						</view>
						<view class="rongqis u-flex">
							<view class=" line-red sm radius" v-for="(item, index) in tag_list" :key="index">{{ item }}
							</view>
						</view>
						<view class="price-box font-OPPOSANS">
							<view class="u-m-b-10">
								<text class="price-title">会员价：</text>
								<text class="price ">{{mgoods.vip_price}}</text>
							</view>
							<!-- <view class="price u-m-b-10" v-else>{{ mgoods.price }}</view> -->
							<view class="">
								<image class="good-car" src="https://duomi.bigchun.com/images/Group 2181.png" mode=""
									style="width: 33rpx;height: 33rpx;"></image>
							</view>
						</view>
						<view class="vip-button" v-if="isVip == 0"
							@click.stop="$Router.push('/pages/index/membeRecharge')">
							开通享优惠
						</view>

						<shopro-sku-vip v-if="showSku && mgoods.id" v-model="showSku" :goodsInfo="mgoods"
							:activityRules="activityRules"
							:buyType="mgoods.activity_type == 'seckill' || detailType === 'score' ? 'buy' : buyType"
							:grouponBuyType="grouponBuyType" :goodsType="detailType === 'score' ? 'score' : 'goods'"
							@changeType="changeType" @getSkuText="getSkuText"></shopro-sku-vip>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	/**
	 * 自定义之秒杀样式组件
	 * @property {Object} detail - 秒杀商品信息
	 */
	export default {
		components: {},
		data() {
			return {
				timestamp: 0, //倒计时
				goodsList: this.detail.list,
				showActivity: true, //是否显示活动。
				tag_list: [
					"次日达", "次日达", "次日达"
				],
				showSku: false, //是否显示规格弹窗
				currentSkuText: '', //选中规格
				detailType: '',
				showShare: false,
				buyType: 'sku',
				grouponBuyType: 'alone', //拼团购买方式。
				showEmpty: false,
				showEmptyText: '',
				showServe: false,
			};
		},
		props: {
			isshouye: {
				type: Boolean,
				detail: false
			},
			detail: {
				type: Object,
				default: () => {
					return {};
				}
			},
			title: {
				type: String,
				detail: ''
			},
			isVip: {
				type: Number,
				detail: ''
			},
		},
		watch: {},
		// 是否登录
		computed: {
			// ...mapGetters(['isLogin']),
		},
		created() {
			// if (this.isLogin) {
			// this.getVip()
			// }
		},
		methods: {
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			// getVip() {
			// 	this.$https('user.isVip').then(res => {
			// 		if (res.code === 1) {
			// 			this.isVip = res.data;
			// 		}
			// 	})
			// },
			// 开通享优惠
			openVip() {
				this.buyType = 'buy';
				this.showSku = true;
			},
			// 组件返回的规格;
			getSkuText(e) {
				this.currentSkuText = e;
			},
			// 组件返回的type;
			changeType(e) {
				this.buyType = e;
			},
		}
	};
</script>

<style lang="scss" scoped>
	.seckill-card {
		//background: linear-gradient(#ffebec 20%, #fff 30%, #fff 100%);
	}

	.seckill-title {
		//background: url($IMG_URL+'/imgs/tag/seckill_title_bg.png') no-repeat;
		//background-position: center top;
		//background-size: 100% auto;
	}

	.activity-wrap {
		//background-color: #fff;
		//margin: 22rpx 22rpx;
		//padding: 10rpx 22rpx;
		background: transparent;
		border-radius: 10rpx;
		min-height: 300rpx;

		.title-box {
			.head-title {
				width: 300rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				display: flex;
				align-items: center;

				.left-img {
					width: 148rpx;
					height: 52rpx;
					margin-right: 14rpx;
				}

				.right-img {
					width: 100rpx;
					height: 30rpx;
				}

				.left-img-dazhe {
					// width: 236rpx !important;
				}

				.left-img-yushou {
					// width: 152rpx !important;
				}
			}

			.head-more {
				.more-text {
					font-size: 22rpx;
					font-weight: 500;
					color: #999999;
				}

				.more-icon {
					color: #333333;
					font-size: 24rpx;
				}
			}
		}

		.scroll-box,
		.goods-box {
			height: 340rpx;
			width: 100%;
		}

		.goods-box {
			height: 340rpx;
			justify-content: space-between;
		}
	}

	// 小商品卡片
	.min-goods {
		width: 220rpx;
		min-height: 370rpx;

		//background: #fff7f7;
		//box-shadow: 0px 7rpx 7rpx 0px rgba(255, 80, 94, 0.32);
		//border-radius: 10rpx;
		.img-box {
			width: 210rpx;
			height: 210rpx;
			overflow: hidden;
			position: relative;
			border-radius: 10rpx 10rpx 0 0;

			.img {
				width: 210rpx;
				height: 210rpx;
				border-radius: 10rpx;
				background-color: #ccc;
			}

			.miaosha-icon {
				width: 44rpx;
				height: 28rpx;
				position: absolute;
				right: 0;
				top: 16rpx;
				z-index: 999;
			}

			.rexiao-icon {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				right: 0;
				top: 0rpx;
				z-index: 999;
			}
		}

		.mgoods-card-bottom {
			height: 100rpx;
			//background: url($IMG_URL+'/imgs/tag/seckill_goods_bg.png') no-repeat;
			//background-position: bottom center;
			//background-size: 100% 100%;
		}

		.goods-title {
			font-size: 26rpx;
			font-weight: 500;
			color: #000000;
			line-height: 38rpx;
			display: flex;
			align-items: flex-start;
			// overflow: hidden;
			// white-space: nowrap;
			// text-overflow: ellipsis;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-Box;
			-webkit-Box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 这里是超出几行省略 */
			overflow: hidden;

			.goods-type {
				margin-right: 6rpx;
				width: 72rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				font-size: 16rpx;
				font-weight: 500;
				color: #FFFFFF;
				display: inline-block;
			}

		}

		.u-ellipsis-2 {
			width: 100%;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-Box;
			-webkit-Box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 这里是超出几行省略 */
			overflow: hidden;
		}

		.price-box {
			margin-top: auto;
			display: flex;
			justify-content: space-between;

			.price-title {
				font-weight: 500;
				color: #FE7F1A;
				font-size: 28rpx;
			}

			.price {
				font-size: 28rpx;
				font-weight: 500;
				color: #FE7F1A;

				&::before {
					content: '￥';
					font-size: 24rpx;
				}
			}

			.original-price {
				font-size: 20rpx;
				font-weight: 500;
				text-decoration: line-through;
				color: #c4c4c4;
			}
		}
	}

	// 大商品卡片
	.big-goods {
		width: 710rpx;
		min-height: 260rpx;
		background: #ffffff;
		box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
		border-radius: 20rpx;

		.goods-img {
			width: 220rpx;
			height: 220rpx;
			border-radius: 6rpx;
		}

		.card-right {
			width: 430rpx;
			height: 100%;
		}

		.goods-title {
			font-size: 26rpx;
			font-weight: 600;
			width: 400rpx;
			color: #000000;
		}

		.subtitle-text {
			font-size: 22rpx;
			width: 400rpx;
			font-weight: 500;
			color: #666666;
		}

		.buy-btn {
			width: 120rpx;
			line-height: 50rpx;
			background: linear-gradient(90deg, #d01325, #ed3c30);
			border-radius: 25rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.progress-text {
			color: #c4c4c4;
			font-size: 20rpx;
			margin-left: 25rpx;
		}

		// 价格
		.price {
			color: #ff0000;
			font-weight: 600;

			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}

		.origin-price {
			color: #c4c4c4;
			font-size: 24rpx;
			text-decoration: line-through;

			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}

	.scroll-box-y {
		background-color: #fff;
	}

	.goods-box-y {
		height: 100% !important;
		// background-color: #fff;
		display: flex;
		flex-wrap: wrap;
	}

	.min-goods-y {
		width: 46%;
		height: 470rpx !important;

		.img-box {
			width: 100%;
		}
	}

	.img-box-y {
		width: 316rpx !important;
		height: 236rpx !important;
	}

	.img-y {
		width: 316rpx !important;
		height: 236rpx !important;
		border-radius: 10rpx;
		background-color: #ccc;
	}

	.vip-button {
		width: 144rpx;
		height: 48rpx;
		background: #FC5351;
		border-radius: 8rpx;
		opacity: 1;
		text-align: center;
		line-height: 48rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 14rpx;
	}

	.rongqis {
		flex-wrap: wrap;
	}

	.line-red {
		padding: 4rpx 8rpx;
		margin-bottom: 10rpx;
		line-height: 30rpx;
		background-color: #FFF0E4;
		text-align: center;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-right: 6rpx;
		color: #ff9900 !important;
		border: none !important;
	}

	.goods-title-1 {
		width: 100%;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-Box;
		-webkit-Box-orient: vertical;
		-webkit-line-clamp: 1 !important;
		/* 这里是超出几行省略 */
		overflow: hidden;
	}
</style>
